<template>
    <div class="photoinfo">
       <h3 class="title">{{photolist.title}}</h3>
        <p class="sub_title">
            <span>发表时间：{{photolist.add_time | dateFormat}}</span>
            <span>浏览：{{photolist.click}}次</span>
        </p>

        <div class="slt">
            <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">
        </div>

        <div class="photo_content" v-html="photolist.content"></div>
        <cmt-box :id="this.id"></cmt-box>
    </div>
</template>
<script>
import comments from '../subcomponents/comments.vue'
export default {
    data() {
        return {
            id:this.$route.params.id,
            photolist:{},
            list:[]
        }
    },
    created() {
        this.getphotolist()
        this.getthumimages()
    },
    methods: {
        getphotolist(){
            this.$http.get("api/getimageInfo/" + this.id).then(res =>{
                if(res.body.status === 0){
                    this.photolist = res.body.message[0]
                }
            })
        },
        getthumimages(){
            this.$http.get("api/getthumimages/"+this.id).then(res =>{
                if(res.body.status === 0){
                    console.log(res)
                   res.body.message.forEach(ele => {
                        ele.w = 600
                        ele.h = 400
                    });
                     this.list = res.body.message
                }
            })
        }
       
    },
    components:{
        "cmt-box": comments
    }
}
</script>
<style lang="scss" scoped>
.photoinfo{
    padding: 0 5px;
    .title{
        font-size: 14px;
        color: #226aff;
        margin: 10px 0;
        text-align: center;
    }
    .sub_title{
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #999;
        padding-bottom: 5px;   
    }
    .slt{
        img{
            margin: 10px;
        }
    }
    .photo_content{
        font-size: 12px;
        line-height: 30px;
    }
}
</style>
